<template>
    <div class="page-container">
        <div class="num">
            <span>提单号：</span>
            <span>{{ state.feeId }}</span>
        </div>
        <div class="basice">
            <div class="titile">基础信息</div>
            <div class="form-container">
                <el-form :inline="true" :label-width="'100px'" :size="'small'" :model="state.infoForm" ref="infoForm">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="委托单位">
                                <el-input v-model="state.infoForm.doccode" clearable placeholder="请输入"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="业务编号">
                                <el-input v-model="state.infoForm.doccode" clearable placeholder="" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="业务类型">
                                <el-select v-model="state.infoForm.currency" placeholder="请选择" style="width: 100%" clearable
                                    filterable remote :remote-method="getCurrentData" remote-show-suffix
                                    :loading="currentLoading">
                                    <el-option v-for="item in current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="服务类型">
                                <el-select v-model="state.infoForm.currency" placeholder="请选择" style="width: 100%" clearable
                                    filterable remote :remote-method="getCurrentData" remote-show-suffix
                                    :loading="currentLoading">
                                    <el-option v-for="item in current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="提单号">
                                <el-input v-model="state.infoForm.doccode" clearable placeholder="请输入"
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="船名">
                                <el-select v-model="state.infoForm.currency" placeholder="请输入后搜索" style="width: 100%"
                                    clearable filterable remote :remote-method="getCurrentData" :loading="currentLoading">
                                    <el-option v-for="item in current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>

                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="航次">
                                <el-select v-model="state.infoForm.currency" placeholder="请输入后搜索" style="width: 100%"
                                    clearable filterable remote :remote-method="getCurrentData" :loading="currentLoading">
                                    <el-option v-for="item in current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="开航日期">
                                <el-date-picker v-model="sailTime" type="daterange" range-separator="~"
                                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%" size="small"
                                    value-format="YYYY-MM-DD" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="船公司">
                                <el-select v-model="state.infoForm.currency" placeholder="请输入后搜索" style="width: 100%"
                                    clearable filterable remote :remote-method="getCurrentData" :loading="currentLoading">
                                    <el-option v-for="item in current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="装货港">
                                <el-select v-model="state.infoForm.currency" placeholder="请输入后搜索" style="width: 100%"
                                    clearable filterable remote :remote-method="getCurrentData" :loading="currentLoading">
                                    <el-option v-for="item in current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="卸货港">
                                <el-select v-model="state.infoForm.currency" placeholder="请输入后搜索" style="width: 100%"
                                    clearable filterable remote :remote-method="getCurrentData" :loading="currentLoading">
                                    <el-option v-for="item in current" :key="item.value" :label="item.label"
                                        :value="item.value">
                                        <span style="float: left"> {{ item.label }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="箱型箱量">
                                <el-select v-model="state.infoForm.checkStatus" placeholder="请选择" style="width: 100%"
                                    filterable>
                                    <el-option v-for="item in aduitStatus" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="业务人员">
                                <el-select v-model="state.infoForm.checkStatus" placeholder="请选择" style="width: 100%"
                                    filterable>
                                    <el-option v-for="item in aduitStatus" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="商务人员">
                                <el-select v-model="state.infoForm.checkStatus" placeholder="请选择" style="width: 100%"
                                    filterable>
                                    <el-option v-for="item in aduitStatus" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="操作人员">
                                <el-select v-model="state.infoForm.checkStatus" placeholder="请选择" style="width: 100%"
                                    filterable>
                                    <el-option v-for="item in aduitStatus" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="单证人员">
                                <el-select v-model="state.infoForm.checkStatus" placeholder="请选择" style="width: 100%"
                                    filterable>
                                    <el-option v-for="item in aduitStatus" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="billTotal">
            <div class="titile">单票合计</div>
            <div class="form-container">
                <el-form :inline="true" label-width="100px" :size="'small'" :model="state.billTotalForm"
                    ref="billTotalForm">
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="利润">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="应收费用">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="实际金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="开票金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="已核销金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="已核销金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="应付费用">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="实际金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="开票金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="已核销金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="已核销金额">
                                <el-input v-model="state.billTotalForm.CustDocNo" disabled clearable placeholder=""
                                    style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="receivable">
            <div class="titile">应收</div>
            <div style="margin-top: 10px">
                <el-table :data="state.receivableTable" border style="width: 100%">
                    <el-table-column align="center" label="序号" type="index" width="70" />
                    <el-table-column align="center" prop="name" width="100" label="类型"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="结算单位"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="费用名称"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="币种"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="单价"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="数量"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="实际金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="费用状态"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="转化汇率"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="折本币金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="账单编号"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票类型"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="税率"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="税金"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="含税金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票号码"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票币种"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="已核销金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="未核销金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="最新核销日期"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="核销结束标记"></el-table-column>
                </el-table>
            </div>
        </div>
        <div class="notesPayable">
            <div class="titile">应付</div>
            <div style="margin-top: 10px">
                <el-table :data="state.notesPayableTable" border style="width: 100%">
                    <el-table-column align="center" label="序号" type="index" width="70" />
                    <el-table-column align="center" prop="name" width="100" label="类型"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="结算单位"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="费用名称"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="币种"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="单价"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="单位"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="数量"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="实际金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="费用状态"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="转化汇率"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="折本币金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="账单编号"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票类型"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="税率"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="税金"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="含税金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票号码"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票币种"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="发票金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="已核销金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="未核销金额"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="最新核销日期"></el-table-column>
                    <el-table-column align="center" prop="address" width="100" label="核销结束标记"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const state = reactive({
    feeId: route.query.id,
    infoForm: {},  //基础信息form
    billTotalForm: {
        CustDocNo: ''
    },  //单票合计form
    receivableTable: [],  //应收明细table数据
    notesPayableTable: [],  //应付明细table数据
})

onMounted(() => {

})

</script>
<style lang="scss" scoped>
.num {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    padding-left: 12px;
    font-weight: 600;

    span {
        color: #000000D8;
        font-weight: medium;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 0px;
        text-align: left;

    }
}

.titile {
    width: 100%;
    height: 20px;
    //左边框线
    border-left: 2px solid #5A9CF8;
    line-height: 20px;
    padding-left: 10px;
    font-weight: 600;
}

.basice {
    width: 100%;
    // height: 164px;
    padding: 8px 12px;
    background: #FFFFFF;
    margin-top: 8px;

    .form-container {
        padding: 6px 6px 6px 8px;

        :deep(.el-form-item--small .el-form-item__label) {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.85);
        }

        :deep(.el-input--suffix .el-input__inner) {
            padding-right: 4px;
        }

        :deep(.el-form--inline .el-form-item) {
            display: flex;
            margin-right: 0;
        }

        :deep(.el-form-item--small.el-form-item) {
            margin-bottom: 8px;
        }
    }

    :deep(.el-checkbox.el-checkbox--large) {
        height: 0px;
    }
}

.billTotal {
    width: 100%;
    min-height: 132px;
    padding: 8px 12px;
    background: #FFFFFF;
    margin-top: 8px;

    .form-container {
        padding: 6px 6px 6px 8px;

        :deep(.el-form-item--small .el-form-item__label) {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.85);
        }

        :deep(.el-input--suffix .el-input__inner) {
            padding-right: 4px;
        }

        :deep(.el-form--inline .el-form-item) {
            display: flex;
            margin-right: 0;
        }

        :deep(.el-form-item--small.el-form-item) {
            margin-bottom: 8px;
        }

        :deep(.el-col-5) {
            width: 20%;
            flex: 0 0 20%;
        }
    }
}

.receivable {
    width: 100%;
    min-height: 132px;
    padding: 8px 12px;
    background: #FFFFFF;
    margin-top: 8px;
}

.notesPayable {
    width: 100%;
    min-height: 132px;
    padding: 8px 12px;
    background: #FFFFFF;
    margin-top: 8px;
}
</style>
